<template>
    <div>
        <NavTopBar title="新增地址" />
        <van-address-edit
            class="edit"
            :area-list="areaList"
            :address-info="addressInfo"
            :show-delete="type == 'edit'"
            show-set-default
            show-search-result
            :search-result="searchResult"
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="onSave"
            @delete="onDelete"
        />
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import NavTopBar from "@/components/NavTopbar.vue";
import { tdist } from "@/utils/tdist";
import { useRoute, useRouter } from "vue-router";
import {
    getAddressDetail,
    addressAdd,
    addressEdit,
    deleteAddress,
} from "@/apis/address";
import { Toast } from "vant";
export default defineComponent({
    components: { NavTopBar },
    setup() {
        const route = useRoute();
        const router = useRouter();

        const state: any = reactive({
            areaList: {},
            searchResult: "",
            type: "add",
            from: "",
            addressId: "",
            addressInfo: {},
        });
        const onSave = async (content: any) => {
            const params: any = {
                userName: content.name,
                userPhone: content.tel,
                provinceName: content.province,
                cityName: content.city,
                regionName: content.county,
                detailAddress: content.addressDetail,
                defaultFlag: content.isDefault ? 1 : 0,
            };
            if (state.type == "edit") {
                params.addressId = state.addressId;
                await addressEdit(params);
            } else {
                await addressAdd(params);
            }
            Toast("保存成功");
            setTimeout(() => {
                router.back();
            }, 1000);
        };
        const onChangeDetail = () => {};

        const onDelete = async function () {
            await deleteAddress(state.addressId);
            Toast("删除成功");
            setTimeout(() => {
                router.back();
            }, 1000);
        };

        onMounted(async () => {
            // 省市区列表构造
            let _province_list: any = {};
            let _city_list: any = {};
            let _county_list: any = {};
            tdist.getLev1().forEach((p: any) => {
                _province_list[p.id] = p.text;
                tdist.getLev2(p.id).forEach((c: any) => {
                    _city_list[c.id] = c.text;
                    tdist
                        .getLev3(c.id)
                        .forEach((q: any) => (_county_list[q.id] = q.text));
                });
            });
            state.areaList.province_list = _province_list;
            state.areaList.city_list = _city_list;
            state.areaList.county_list = _county_list;

            const { addressId, type, from } = route.query;
            state.addressId = addressId;
            state.type = type;
            state.from = from || "";
            if (type == "edit") {
                const { data: addressDetail } = await getAddressDetail(
                    addressId
                );
                let _areaCode = "";
                const province = tdist.getLev1();
                Object.entries(state.areaList.county_list).forEach(
                    ([id, text]) => {
                        // 先找出当前对应的区
                        if (text == addressDetail.regionName) {
                            // 找到区对应的几个省份
                            const provinceIndex = province.findIndex(
                                (item: any) =>
                                    item.id.substr(0, 2) == id.substr(0, 2)
                            );
                            // 找到区对应的几个市区
                            // eslint-disable-next-line no-unused-vars
                            const cityItem = Object.entries(
                                state.areaList.city_list
                            ).filter(
                                ([cityId, cityName]) =>
                                    cityId.substr(0, 4) == id.substr(0, 4)
                            )[0];
                            // 对比找到的省份和接口返回的省份是否相等，因为有一些区会重名
                            if (
                                province[provinceIndex].text ==
                                    addressDetail.provinceName &&
                                cityItem[1] == addressDetail.cityName
                            ) {
                                _areaCode = id;
                            }
                        }
                    }
                );
                state.addressInfo = {
                    id: addressDetail.addressId,
                    name: addressDetail.userName,
                    tel: addressDetail.userPhone,
                    province: addressDetail.provinceName,
                    city: addressDetail.cityName,
                    county: addressDetail.regionName,
                    addressDetail: addressDetail.detailAddress,
                    areaCode: _areaCode,
                    isDefault: !!addressDetail.defaultFlag,
                };
            }

            console.log(state.areaList);
        });

        return { ...toRefs(state), onSave, onChangeDetail, onDelete };
    },
});
</script>

<style lang="scss">
.van-address-edit {
    .van-button {
        &:nth-child(1) {
            background: $primary;
            border-color: $primary;
        }
        &:nth-child(2) {
            background: $danger;
            border-color: $danger;
            color: #fff;
        }
    }
}
</style>
